iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
Mobile Development

大一之 Android Kotlin 自習心路歷程系列 第 13

[Day 13]Android in Kotlin: ShapeDrawable 的 Rectangle 製作

  • 分享至 

  • xImage
  •  

Drawable 有分很多種,在這邊就分享筆者最常用的 ShapeDrawable 以及一些範例。

在刻畫面的時候常常會有一些動態的需求,比如說按鈕點擊後加深顏色,之類的
在這時候就可以自製出 drawable 來解決,完成一些在 layout 完成不了的操作。

除了這個需求,如果有很常出現的元件,也可以設個 shape drawable 做整理,往後就只需要對這個元件加上 background 就可以了。

在 res 資料夾底下的 drawable,New 一個 Drawable Resource File
res draw

建立好以後就會看到 seletor 用角括號括好了

selector

selector 是放在最外面的。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

</selector>

裡面只可以新增 item,那我們就建立一個 item 的 tag

item

item 可以添加屬性,代表他的狀態,比如說,加入 android:state_pressed 的屬性

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <!--按壓時-->
    </item>
    <item android:state_pressed="false">
        <!--非按壓時-->
    </item>
</selector>

當他被按壓的時候就會跑上面的,反之則下面。就可以達到按壓和非按壓時顏色不一樣的效果了。

當然也可以不加屬性,那就永遠都跑它裡面

shpae

shape 要在 item 標籤裡面建立。它能夠控制外觀和顏色。它也有很多屬性,其中的 android:shape="" 就負責控制形狀

  • rectangle: 方形 (預設)
  • ring: 環形
  • oval: 圓或橢圓
  • line: 線

以下就用預設的方形繼續介紹

之後就能用 tag 在 shape 裡面選擇它的外觀

  • solid: 單色填滿
  • stroke: 邊框
  • padding: 內邊距
  • corners: 圓角
  • gradient: 漸層填滿
  • size: 大小

size 和 padding 就不在這裡多做介紹了

solid: 單色填滿

  • color: 填滿顏色

底下只有一種屬性,填入顏色就可以有效果了

<solid android:color="@android:color/darker_gray"/>

stroke: 實線或虛線邊框

  • color: 邊框的顏色
  • width: 邊框的寬度
  • dashGap: 每個虛線之間的距離
  • dashWidth: 每個虛線的長度
<stroke    
    android:color="@android:color/white"
    android:width="20dp"
    android:dashGap="20dp"
    android:dashWidth="50dp"/>

corners: 圓角

可以對 rectangle 增加圓角的效果。

除了用 radius 令所有角增加效果以外,還可以對個別的角設定。

<corners android:radius="20dp"/>

gradient: 漸層填滿

其中的漸層填滿有分為三種顏色

  • start color
  • center color
  • end color
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:startColor="@color/colorPrimary"
                android:centerColor="@color/colorPrimaryDark"
                android:endColor="@color/colorAccent"/>
        </shape>
    </item>
</selector>

也可以只加兩個顏色。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:startColor="@color/colorPrimary"
                android:endColor="@color/colorAccent"/>
        </shape>
    </item>
</selector>

還能再更改角度,不過,角度只能改成 45 的倍數。
android:type=""

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:startColor="@color/colorPrimary"
                android:centerColor="@color/colorPrimaryDark"
                android:endColor="@color/colorAccent"
                android:angle="180"/>
        </shape>
    </item>
</selector>

還能用 android:type="" 改變漸層的類型,預設為 linear。

若為 radial 還要再加上 gradientRadius 的屬性調整半徑。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:startColor="@color/colorPrimaryDark"
                android:centerColor="@color/colorAccent"
                android:endColor="@color/colorPrimary"
                android:type="radial"
                android:gradientRadius="400dp"/>
        </shape>
    </item>
</selector>

使用

只要改元件的 background 為預先做好的 drawable 就可以看到效果了

<Button
        android:id="@+id/btnMainSave"
        android:text="save"
        android:background="@drawable/shape_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


上一篇
[Day 12] Android in Kotlin: Kotlin: 使用 Intent 在畫面之間傳遞訊息
下一篇
[Day 14] Android in Kotlin: 預設的 Alert Dialog 使用分享
系列文
大一之 Android Kotlin 自習心路歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言